<template>
    <van-cell class="itemcontent" @click="godetaile(articleData.art_id)">
        <div class="title van-multi-ellipsis--l2" slot="title" >
            {{articleData.title}}
        </div>
        <div class="label " slot="label">
            <div v-if="articleData.cover.type==3" class="Olineimgs">
                <div v-for="(item,index) in articleData.cover.images" class="imgsitem" :key="index" >
                    <van-image
                        class="coveritemimg"
                        :src="item"
                        fit="cover"
                    />
                </div>
            </div>
            <div class="labletext">
                <span>{{articleData.aut_name}}</span>
                <span>{{articleData.comm_count}} 评论</span>
                <span>{{articleData.pubdate | latetime}}</span>
            </div>
            
        </div>
        <div slot="default" v-if="articleData.cover.type==1" class="rightimg">
            <van-image
                :src="articleData.cover.images[0]"
                fit="cover"
            />
        </div>
    </van-cell>
</template>

<script>
import '@/utils/daylate.js'
export default {
  name:'ListItem',
  components: {},
  props:{
      articleData:{
          type:Object,
          required:true
      }
  },
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {
    godetaile(artid){
        console.log(222)
        this.$router.push({path:`/ArticleDetaile/${artid}`})
    },
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scope>
.itemcontent{
   .title{
        font-size: 32px;
        color:rgb(137,137,137);

    }
    .labletext{
        margin-top:15px;
    }
    .van-cell__value{
        flex:unset;
        width:232px;
        height:146px;
        padding-left:25px;
    }
    .rightimg{
        width:232px;
        height:146px;
        border-radius: 5px;
        overflow: hidden;
    }
    .van-cell__label span{
        font-size:22px;
        color:#b4b4b4;
        margin-right:25px;
    }
    .Olineimgs{
        display:flex;
        padding:10px 0;
        .imgsitem{
            flex:1;
            height:146px;
            padding: 5px;
            .coveritemimg{
                width: 100%;
                height: 146px;
                border-radius:5px;
                overflow: hidden;
            }
        }
    }
}


</style>